<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="30" type="flex">
        <el-col :span="10">
          <NewCard :isright="true" title="圈主">
            <div class="businFilter"></div>
            <template #right>
              <ComForm
                :config="config"
                :list="comForm"
                @EventOnsubmit="inquireFn"
                @EventReset="reset"
              ></ComForm>
            </template>
            <div class="businTalbe">
              <ComTable
                :config="config"
                :pagination="{
                  total: pageing.total,
                  pageNum: pageing.pageNum,
                  pageSize: pageing.pageSize,
                }"
                :list="tableData"
                :modes="tableModes"
                @EventRowClick="RowClickFn"
              >
              </ComTable>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="14">
          <NewCard :isright="true" title="刘易阳圈主">
            <el-tabs
              v-model="activeName"
              type="card"
              @tab-click="handleClick(activeName)"
            >
              <el-tab-pane label="消费记录" name="first">
                <Consumption :consumptiontable="consumptiontable"></Consumption>
              </el-tab-pane>
              <el-tab-pane label="充值记录" name="second">
                <Recharge
                  :getRechargelisttable="getRechargelisttable"
                ></Recharge>
              </el-tab-pane>
              <el-tab-pane label="用户赋值" name="third">
                <User
                  :assignment="assignment"
                  :assignmenttable="assignmenttable"
                ></User>
              </el-tab-pane>
              <el-tab-pane label="发票记录" name="fourth">
                <Invoice :getinvoicelisttable="getinvoicelisttable"></Invoice>
              </el-tab-pane>
              <el-tab-pane label="浏览记录" name="fifth">
                <Browse :getBrowselisttable="getBrowselisttable"></Browse>
              </el-tab-pane>
              <el-tab-pane label="商机分析" name="sixth">
                <!-- <Business
                 :getBusinessnamelist="getBusinessnamelist" 
                :getBusinesslisttable="getBusinesslisttable" 
                :getBusinessobjckt="getBusinessobjckt"
                @handleClick="handleClick"
                > </Business> -->
                <div>
                  <div>
                    <h3 class="title">圈员标签</h3>
                    <div class="label_search">
                      <div class="taglabel">
                        <el-tag
                          :key="indenx"
                          v-for="(tag, indenx) in tags"
                          :disable-transitions="false"
                        >
                          {{ tag.name }}
                        </el-tag>
                      </div>
                      <el-button size="mini" class="label_more"
                        >更多<i class="el-icon-caret-bottom"></i
                      ></el-button>
                    </div>
                  </div>
                  <h3 class="title">商机分析</h3>
                  <div>
                    <el-table
                      :data="getBusinesslisttable"
                      style="width: 100%"
                      size="mini"
                    >
                      <el-table-column prop="type" label="类别" width="100px">
                        <template slot-scope="scope">
                          <el-select
                            v-model="scope.row[scope.column.property]"
                            size="mini"
                            @change="Changetype(scope.row)"
                          >
                            <el-option
                              v-for="(item, index) in typelist"
                              :key="index"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column prop="typeId" label="名称" width="160px">
                        <template slot-scope="scope">
                          <el-cascader
                            :props="defaultParams"
                            :options="options"
                            v-model="selectedOptions"
                            @change="Changename(scope.row)"
                            size="mini"
                          ></el-cascader>
                        </template>
                      </el-table-column>
                      <el-table-column prop="source" label="来源" width="120px">
                        <template slot-scope="scope">
                          <el-select
                            v-model="scope.row[scope.column.property]"
                            placeholder=""
                            size="mini"
                            @change="Changesource(scope.row)"
                          >
                            <el-option
                              v-for="(
                                item, index
                              ) in getBusinessobjckt.sourceList"
                              :key="index"
                              :label="item.name"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="yjcjTime"
                        label="预计成交时间"
                        width="140px"
                      >
                        <template slot-scope="scope">
                          <el-date-picker
                            v-model="scope.row[scope.column.property]"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd"
                            size="mini"
                            @change="Changetime(scope.row)"
                          >
                          </el-date-picker>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="yjcje"
                        label="预计成交价"
                        width="100px"
                      >
                        <template slot-scope="scope">
                          <el-input
                            placeholder="请输入内容"
                            v-model="scope.row[scope.column.property]"
                            clearable
                            size="mini"
                            @blur="Changecje(scope.row)"
                          >
                          </el-input>
                        </template>
                      </el-table-column>

                      <el-table-column prop="status" width="110px" label="状态">
                        <template slot-scope="scope">
                          <el-select
                            v-model="scope.row[scope.column.property]"
                            placeholder=""
                            size="mini"
                            @change="Changestatus(scope.row)"
                          >
                            <el-option
                              v-for="(
                                item, index
                              ) in getBusinessobjckt.statuslist"
                              :key="index"
                              :label="item.name"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column prop="remark" label="备注" width="110px">
                        <template slot-scope="scope">
                          <el-input
                            placeholder="请输入内容"
                            v-model="scope.row[scope.column.property]"
                            clearable
                            size="mini"
                            @blur="Changeremaker(scope.row)"
                          >
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            type="primary"
                            @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button
                          >
                        </template>
                      </el-table-column>
                    </el-table>
                    <el-button class="addbtn" size="mini" @click="addinfo"
                      >新增</el-button
                    >
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="圈员信息" name="seventh">
                <Information
                  :getinformationlistable="getinformationlistable"
                ></Information>
              </el-tab-pane>
            </el-tabs>
            <div class="businFilter"></div>

            <div class="businTalbe"></div>
          </NewCard>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import NewCard from "../../../components/newCard.vue";
import ComForm from "../../../components/comForm.vue";
import ComTable from "../../../components/comTable.vue";
import Consumption from "../components/Consumption";
import Browse from "../components/Browse";
import Business from "../components/Business";
import Invoice from "../components/Invoice";
import Recharge from "../components/Recharge";
import User from "../components/User";
import Information from "../components/Information";
import {
  getcirclemaster,
  getConsumptionapilist,
  getUserassignment,
  getRechargelist,
  getinformationlist,
  getBrowselist,
  getinvoicelist,
  getBusinesslist,
  getBusinesslistobjck,
  getBusinessnamelist,
  deleteBusinesslist,
  editBusinesslist,
  addBusinesslist,
} from "../../../newApi_3-24/askAround/index";

export default {
  name: "businessManage",
  components: {
    NewCard,
    ComForm,
    ComTable,
    Consumption,
    Browse,
    Business,
    Information,
    Invoice,
    Recharge,
    User,
  },
  data() {
    return {
      //标签
      tags: [
        { name: "标签一", type: "" },
        { name: "标签二", type: "success" },
        { name: "标签三", type: "info" },
        { name: "标签四", type: "warning" },
        { name: "标签五", type: "danger" },
        { name: "标签一", type: "" },
        { name: "标签二", type: "success" },
        { name: "标签三", type: "info" },
        { name: "标签四", type: "warning" },
      ],

      // 级联菜单配置
      options: [],
      selectedOptions: [],
      defaultParams: {
        label: "name",
        value: "pid",
        children: "children",
      },
      //新增商机分析数据集合
      addlist:{
          circleId: "",
          type: "",
          typeId: "",
          source: "",
          status: "",
          remark: "",
          yjcjTime: "",
          yjcje: ""
      },
      typelist: [
        {
          label: "咨询",
          value: "5",
        },
        {
          label: "项目",
          value: "6",
        },
      ],
      activeName: "first",
      // 表格配置
      config: {
        // border: true,
        isAdd: false,
        loading: false,
      },
      // 表单选项
      comForm: {
        modes: [
          {
            placeholder: "用户姓名/ID",
            formType: "input",
            mode: "name",
            label: "",
            value: "",
          },
        ],
      },

      // 圈主信息
      tableData: [],
      // 圈主表格参数
      tableModes: [
        {
          showOverflowTooltip: true,
          width: 110,
          label: "手机号",
          mode: "phonenumber",
          showOverflowTooltip: true,
        },
        {
          showOverflowTooltip: true,
          width: 100,
          label: "用户姓名",
          mode: "nickname",
          showOverflowTooltip: true,
        },

        {
          width: 120,
          label: "累计充值",
          mode: "deposit",
        },

        {
          width: 120,
          label: "问金余额",
          mode: "balance",
        },
        {
          width: 160,
          label: "注册时间",
          mode: "createTime",
        },
      ],
      //圈主id
      masetrid: "",
      //消费订单数据集合
      consumptiontable: [],
      //用户赋值列表查询集合
      assignmenttable: [],
      //用户赋值集合
      assignment: {},
      //充值记录查询集合
      getRechargelisttable: [],
      //发票记录查询集合
      getinvoicelisttable: [],
      //商机分析
      getBusinesslisttable: [],
      //商机分析篩選的状态跟来源
      getBusinessobjckt: {
        sourceList: [],
        statuslist: [],
      },
      //商机分析的名称集合
      getBusinessnamelist: [],
      //浏览记录查询集合
      getBrowselisttable: [],

      //圈员信息查询集合
      getinformationlistable: [],
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
    };
  },
  created() {
    this.getcirclemasterfn();
  },
  methods: {
    //获取圈主信息
    async getcirclemasterfn() {
      let { code, rows } = await getcirclemaster(this.pageing);
      if (code != 200) return;
      this.tableData = rows;
    },
    //查询消费订单信息
    async getConsumptionapilistfn(id) {
      let data = {
        circleId: id,
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
      };
      let { code, rows } = await getConsumptionapilist(data);
      if (code != 200) return;
      this.consumptiontable = rows;
    },
    //查詢赋值记录
    async getUserassignmentfn(id) {
      let newdata = {
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
        userId: id,
      };
      let { code, rows } = await getUserassignment(newdata);
      if (code == 200) {
        this.assignmenttable = rows;
      }
    },
    //查詢充值记录
    async getRechargelistfn(id) {
      let newdata = {
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
        userId: id,
      };
      let { code, rows } = await getRechargelist(newdata);
      if (code == 200) {
        this.getRechargelisttable = rows;
      }
    },
    //查询浏览记录
    async getBrowselistfn(id) {
      let newdata = {
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
        id: id,
      };
      let { code, rows } = await getBrowselist(newdata);
      if (code == 200) {
        this.getBrowselisttable = rows;
      }
    },
    //查询发票记录
    async getinvoicelistfn(id) {
      let newdata = {
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
        id: id,
      };
      let { code, rows } = await getinvoicelist(newdata);
      if (code == 200) {
        this.getinvoicelisttable = rows;
      }
    },
    //查询商机分析记录
    async getBusinesslistfn(id) {
      let newdata = {
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
        circleId: id,
      };
      let { code, data } = await getBusinesslist(newdata);
      if ((code = 200)) {
        this.getBusinesslisttable = data;
      }
    },
    //删除商机分析记录
    async deleteBusinesslistfn(id) {
      let { code } = await deleteBusinesslist(id);
      if ((code = 200)) {
        this.$message({
          showClose: true,
          message: "删除成功",
          type: "success",
        });
        this.getBusinesslistfn(this.masetrid);
      }
    },
    //编辑商机分析记录
    async editBusinesslistfn(id) {
      let { code } = await editBusinesslist(id);
      if ((code = 200)) {
        this.$message({
          showClose: true,
          message: "修改成功",
          type: "success",
        });
        this.getBusinesslistfn(this.masetrid);
      }
    },
    //新增商机分析记录
    async addBusinesslistfn() {
      let { code } = await addBusinesslist();
      if ((code = 200)) {
        this.$message({
          showClose: true,
          message: "新增成功",
          type: "success",
        });
        this.getBusinesslistfn(this.masetrid);
      }
    },
    //查询设置来源状态记录
    async getBusinesslistobjckfn() {
      let newdata = {
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
      };
      let { code, data } = await getBusinesslistobjck();
      if (code == 200) {
        let newdata = data;
        // console.log(data,"123")
        newdata.forEach((item) => {
          if (item.type == "o_from") {
            this.getBusinessobjckt.sourceList.push(item);
          } else if (item.type == "o_status") {
            this.getBusinessobjckt.statuslist.push(item);
          }
        });
      }
    },
    //查询商机设置状态跟来源记录
    async getBusinesslistfn(id) {
      let newdata = {
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
        circleId: id,
      };
      let { code, data, rows } = await getBusinesslist(newdata);
      if (code == 200) {
        this.getBusinesslisttable = rows;
      }
    },
    //查询商机分析姓名联级接口
    async getBusinessnamefn() {
      let { code, data, rows } = await getBusinessnamelist();
      if (code == 200) {
        this.options = rows;
      }
    },

    //圈员信息记录
    async getinformationlistfn(id) {
      let newdata = {
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
        id: id,
      };
      let { code, rows } = await getinformationlist(newdata);
      if (code == 200) {
        this.getinformationlistable = rows;
      }
    },

    // 表格行点击了
    RowClickFn(row) {
      this.masetrid = row.id;
      let id = row.id;
      this.assignment = row;
      console.log(this.assignment, "this.assignment");
      //查询对于应ID的消费记录
      this.getConsumptionapilistfn(id);
    },
    // tab判断处理
    selecttab(value) {
      console.log(value, "sadasdasd");
      switch (value) {
        case "first":
          this.getConsumptionapilistfn(this.masetrid);
          break;
        case "second":
          this.getRechargelistfn(this.masetrid);
          break;
        case "third":
          this.getUserassignmentfn(this.masetrid);
          break;
        case "fourth":
          this.getinvoicelistfn(this.masetrid);
          break;
        case "fifth":
          this.getBrowselistfn(this.masetrid);
          break;
        case "sixth":
          this.getBusinesslistfn(this.masetrid);
          this.getBusinesslistobjckfn();
          this.getBusinessnamefn();
          break;
        case "seventh":
          this.getinformationlistfn(this.masetrid);
          break;
      }
    },
    //tab切换事件
    handleClick(activeName) {
      if (!this.masetrid == "") {
        this.selecttab(activeName);
      } else {
        this.$message({
          message: "请选择某一条圈主信息",
          type: "error",
        });
      }
    },
    //级联菜单触发事件
    Changetype(row) {
      console.log(row, "123");
      // console.log(value,"456");
      this.editBusinesslistfn(row);
    },
    // getTreeParents(data) {
    //     const parentKey = [];
    //     data.forEach((item) => {
    //       if (item.children && item.children.length) {
    //         parentKey.push(item.key);
    //         const temp = this.getTreeParents(item.children);
    //         if (temp.length) {
    //           parentKey.push(...temp);
    //         }
    //       }
    //     });
    //     return parentKey;
    //   },

    Changename(row) {
      row.typeId = this.selectedOptions[this.selectedOptions.length - 1];
      console.log(row, "123");
      // 1518768631886446600
      console.log(
        this.getTreeParents(this.options),
        "1111"
      );
    },
    Changesource(row) {
      this.editBusinesslistfn(row);
      console.log(row, "123");
    },
    Changecje(row) {
      this.editBusinesslistfn(row);
      console.log(row, "123");
    },
    Changestatus(row) {
      this.editBusinesslistfn(row);
      console.log(row, "123");
    },
    Changetime(row) {
      this.editBusinesslistfn(row);
      console.log(row, "123");
    },
    Changeremaker(row) {
      this.editBusinesslistfn(row);
      console.log(row, "123");
    },
    //新增商机分析数据
    addinfo(item) {
    
      this.getBusinesslisttable.push(this.addlist);
      console.log(this.getBusinesslisttable,"123")
    },
    //删除商机分析数据
    handleDelete(index, row) {
      // console.log(row.id)
      this.deleteBusinesslistfn(row.id);
      console.log(index, row);
      // this.getBusinesslisttable.splice(index, 1);
    },
    // 当前页发生改变时
    handleCurrentChange(pageNum) {
      this.pageing.pageSize = pageNum;
      this.getcirclemasterfn();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getcirclemasterfn();
    },
    //分类查询
    inquireFn(paramsArr) {
      // console.log(paramsArr,"paramsArr")
      // 筛选数据
      let { pageing } = this;
      paramsArr.forEach((item) => {
        for (const key in item) {
          this.pageing[key] = item[key];
        }
      });
      pageing.pageNum = 1;
      this.getcirclemasterfn();
    },

    //重置
    reset() {
      this.form = {
        name: "",
      
      };
      this.pageing = { pageNum: 1, pageSize: 10 };
    },
  },
};
</script>
<style scoped>
.label-box-content {
  height: 100%;
}
/* 标题筛选 */
.businFilter {
  position: absolute;
  right: 30px;
  top: 10px;
}
>>> .el-form-item {
  width: auto;
  margin-bottom: 0;
}
.businFilter >>> .el-form-item__content {
  width: 160px;
}
.businFilter >>> .left .el-form-item:last-child .el-form-item__content {
  width: 195px;
}
.businFilter >>> .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
}
>>> .el-input--medium {
  width: 150px !important;
}
.businFilter >>> .container .right {
  margin-top: 0;
}
.el-input-number--mini {
  width: 100px;
}
.el-card >>> .top {
  border-bottom: 0;
  padding-top: 0;
}
.el-card >>> .el-card__body {
  position: relative;
  height: 100%;
}
.el-card >>> .el-card__body > div {
  padding-top: 0 !important;
  height: 92%;
  overflow-y: auto;
}
.corrExpert .el-card >>> .el-card__body > div {
  overflow-y: initial;
}

.el-row,
.el-card {
  height: 100%;
  margin-bottom: 0;
}
.label-box-content >>> h1 {
  margin: 0;
  padding: 20px 0 15px 0;
  border-bottom: 1px solid #e6ebf5;
}
.label-box-content >>> .top::after {
  height: 0;
}
/* 标题筛选 */
.businFilter {
  position: absolute;
  right: 30px;
  top: 10px;
}

.businFilter >>> .el-form-item__content {
  width: 160px;
}
.businFilter >>> .left .el-form-item:last-child .el-form-item__content {
  width: 195px;
}
.businFilter >>> .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
}
.businFilter >>> .container .right {
  margin-top: 0;
}
/* tabs切换 */
>>> .el-tabs__header {
  padding: 0;
  position: absolute;
  top: 10px;
  right: 20px;
}
>>> .el-tabs__item {
  padding: 0 10px;
  height: 35px;
  box-sizing: border-box;
  line-height: 35px;
  display: inline-block;
  list-style: none;
  font-size: 12px;
  font-weight: 500;
  color: #303133;
  position: relative;
}
>>> .el-tabs__nav-wrap {
  overflow: hidden;
  margin-bottom: 0;
  position: relative;
}
>>> .el-tabs__item.is-active {
  background-color: #46a6ff;
  color: white;
}
>>> .el-pagination .el-input--medium{
  width: 80px !important;
}
.addbtn {
  /* width: 0%; */
  border-radius: 10px;
  color: #e37709;
  border: 1px #e37709 solid;
  margin: 10px;
  text-align: center;
}
</style>